<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
     canvas三要素
     id:唯一标识
     width:画布内容宽度的像素大小
     height:画布内容高度的像素大小
   -->
    <canvas id="canvas1" width="600" height="600">
      这里的内容画布是不显示的
    </canvas>
  </body>
  <script>
    //1.找到画布对象
    var canvas1 = document.querySelector("#canvas1");
    //2.找到上下文对象(画笔对象)这边是2d引擎的
    var ctx = canvas1.getContext("2d");
    //3.绘制直线
    //3.1设置绘制的起始点
    ctx.beginPath();
    ctx.moveTo(50, 50);
    //3.2设置经过某个位置
    ctx.lineTo(50, 300);
    ctx.lineTo(300, 100);
    ctx.lineTo(300, 250);
    ctx.closePath();
    //3.3绘制路径
    ctx.lineCap = "round"; //设置线条端部形状为圆角
    // ctx.lineJoin = "round"; //设置拐角部位形状为圆角
    // ctx.miterLimit = 2;
    ctx.strokeStyle = "aqua";
    ctx.lineWidth = 20;
    ctx.stroke();
  </script>
</html>
